<template>
	<view class="waterfall">
		<view v-if="sell && lists.length > 0" class="divider" :style="{color:app.globalData.primaryColor}">
			<view class="divider-line" :style="backgroundColor()"></view>
			<view class="divider-text">
				为您推荐
			</view>
			<view class="divider-line" :style="backgroundColor()"></view>
		</view>
		<uv-waterfall ref="waterfall" v-model="wfall.list" :add-time="10" :column-gap="wfall.columnGap"
			@changeList="wfall.changeList">
			<template v-slot:list1>
				<view>
					<view v-for="(item, index) in wfall.list1" :key="'card' + index" class="card"
						@click="goodsOnClick(item)">
						<image mode="aspectFit" class="card-image" :src="item?.cover" :observeLazyLoad="true"
							:fade="true" duration="450" lazy-load observeLazyLoad />
						<view class="tags center w-fill ellipsis" v-if="item?.marks?.length > 0">
							<view v-for="(mark, mi) in item?.marks?.slice(0, 3)" :key="'myTag' + mi"
								class="tag tagMini myTag w-full center ellipsis">
								{{ mark }}
							</view>
						</view>
						<view class="heading">
							{{ item?.name }}
						</view>
						<view class="category">
							¥
							<view class="num">
								{{ app.globalData.type ? item?.price_market : item?.price_selling }}
							</view>
							{{ app.globalData.type ? '' : '/天' }}
						</view>
						<!--<view class="author">立即抢购</view> -->
						<view class="tags start">
							<view v-for="(bt, bi) in bottomTag" :key="'tags' + bi" class="tag tagDefault myTag"
								:style="'background-color:' + bt.color">
								{{ bt.text }}
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:list2>
				<view>
					<view v-for="(item, index) in wfall.list2" :key="'card' + index" class="card"
						@click="goodsOnClick(item)">
						<image mode="aspectFit" class="card-image" :src="item?.cover" :observeLazyLoad="true"
							:fade="true" duration="450" lazy-load observeLazyLoad />
						<view class="tags center w-fill ellipsis" v-if="item?.marks?.length > 0">
							<view v-for="(mark, mi) in item?.marks?.slice(0, 3)" :key="'myTag' + mi"
								class="tag tagMini myTag w-full center ellipsis">
								{{ mark }}
							</view>
						</view>
						<view class="heading">
							{{ item?.name }}
						</view>
						<view class="category">
							¥
							<view class="num">
								{{ app.globalData.type ? item?.price_market : item?.price_selling }}
							</view>
							{{ app.globalData.type ? '' : '/天' }}
						</view>
						<!--<view class="author">立即抢购</view> -->
						<view class="tags start">
							<view v-for="(bt, bi) in bottomTag" :key="'tags' + bi" class="tag tagDefault myTag"
								:style="'background-color:' + bt.color">
								{{ bt.text }}
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
		<uv-load-more :status="loadStatus" :line="true" @loadmore="getData"></uv-load-more>
		<!-- <uv-empty v-if="!loading&&wfall.list?.length == 0"></uv-empty> -->
		<!-- <Loading v-if="loading"></Loading>
        <uv-empty v-else-if="wfall.list?.length == 0"></uv-empty> -->
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import useGoodsList from './goodsListMetheds'
	const props = defineProps({
		loading: {
			type: Boolean,
			default: false
		},
		//是否显示divider
		sell: {
			type: Boolean,
			default: false
		},
		pullDown: {
			type: Boolean,
			default: true
		},
		//是否默认请求
		defaultRequest: {
			type: Boolean,
			default: true
		}
	})
	const {
		loading,
		loadStatus,
		lists,
		getData,
		setListsData,
		searchData,
		toDetail,
	} = useGoodsList(props)
	const app = getApp()
	const wfall = reactive({
		list: lists, // 瀑布流全部数据
		list1: [],
		list2: [],
		leftGap: 10,
		rightGap: 10,
		columnGap: 10,
		changeList: (e) => {
			wfall[e.name].push(e.value);
		},
	})
	const bottomTag = ref(app.globalData.type ? [{
		text: "现货秒发",
		color: "#8bbdbd",
	}, ] : [{
		text: "可买断",
		color: "#8ea4d6",
	}, {
		text: "现货秒发",
		color: "#8bbdbd",
	}, ])
	const goodsOnClick = app.throttle((value) => {
		toDetail(value)
	})
	const waterfall = ref(null)
	const clear = () => {
		wfall.list = []
		waterfall.value?.clear();
		wfall.list1 = []
		wfall.list2 = []
	}
	const search = (value) => {
		clear()
		searchData(value)
	}
	const setLists = (value) => {
		clear()
		setListsData(value)
	}
	// 输出组件的方法，让外部组件可以调用
	defineExpose({
		getData,
		setLists,
		search,
	})
	const backgroundColor = () => {
		return {
			backgroundColor: uni.$uv.colorToRgba(app.globalData.primaryColor, 0.5)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.uv-waterfall {
			width: 100%;
		}
	}

	.divider {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 12px;
		margin-bottom: 10px;
		font-size: 13px;
		box-sizing: border-box;

		.divider-line {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: 1 1 auto;
			flex: 1 1 auto;
			height: 1px;
			transform: scaleY(.5);
			box-sizing: border-box;

		}

		.divider-text {
			white-space: nowrap;
			padding: 0 10px;
			font-weight: 400;
			font-size: 14px;
			display: inline-block;
		}
	}

	.card {
		height: 100%;
		display: inline-block;
		background: white;
		width: -webkit-fill-available;
		padding: 0.4em;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;
		margin-bottom: 10px;
		transition: all 0.3s ease-out;
	}

	.card:active {
		transform: scale(0.98);
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
	}

	.card-image {
		width: 100%;
		height: 160px;
		border-radius: 6px;
	}

	.category {
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		color: red;
		padding: 7px;
		display: flex;
		align-items: baseline;
	}

	.category .num {
		font-size: 20px;
		font-weight: 900;
		line-height: 2px;
		margin: 2px;
	}

	.category:hover {
		cursor: pointer;
	}

	.tags {
		display: flex;
		gap: 4px;
	}

	.center {
		justify-content: center;
	}

	.start {
		justify-content: flex-start;
	}

	.heading {
		width: -webkit-fill-available;
		color: black;
		font-size: 13px;
		margin: 7px 0;
		font-weight: 700;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		word-break: break-all;
	}

	.heading:hover {
		cursor: pointer;
	}

	.author {
		color: white;
		font-weight: 400;
		font-size: 11px;
		background: red;
		border-radius: 20px;
		margin: 0 auto;
		width: 50%;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}

	.author:hover {
		transform: scale(0.98);
		opacity: 0.5;
		cursor: pointer;
	}

	.tagMini {
		color: rgb(153, 153, 153);
		background: rgb(233, 233, 233);
	}

	.tagDefault {
		color: var(--nut-tag-default-color, #fff);
	}

	.tag {
		display: inline-flex;
		align-items: center;
		height: var(--nut-tag-height, auto);
		padding: 0 4px;
		font-size: 10px;
		border-radius: var(--nut-tag-default-border-radius, 4px);
		border: var(--nut-tag-border-width, 1px) solid transparent;
	}

	/*.myTag {
    width: auto;
}*/

	.name {
		font-weight: 600;
	}

	.name:hover {
		cursor: pointer;
	}
</style>